<template>
    <view class="cForm">
        <view v-if="historylist.length==0" class="page_dcenter_null">
            <img class="page_dcenter_null_img" src="../../../static/img_null_bookbuilding.png" />
            <view>暂无记录</view>
        </view>
        <div v-else>
        <div class="cForm_t">
            <div class="cForm_tli">日期</div>
            <div class="cForm_tli">早餐</div>
            <div class="cForm_tli">午餐</div>
            <div class="cForm_tli">晚餐</div>
            <div class="cForm_tli">睡前</div>
            <div class="cForm_tli">凌晨</div>
        </div>
        <div class="cForm_tw">
            <div class="cForm_tli"></div>
            <div class="cForm_tli">
                <div>空腹</div>
                <div>后</div>
            </div>
            <div class="cForm_tli">
                <div>前</div>
                <div>后</div>
            </div>
            <div class="cForm_tli">
                <div>前</div>
                <div>后</div>
            </div>
            <div class="cForm_tli"></div>
            <div class="cForm_tli"></div>
        </div>
        <scroll-view scroll-y class="pagses">
            <div class="fm_top" v-for="(item, index) in dataList" :key="index">
                <div class="fm_top_li">{{item.time}}</div>
                <div class="fm_top_li">
                    <div :class="(item.isvalue0==1||item.isvalue0==3)?'red':''">{{item.value0||'/'}}</div>
                    <div :class="(item.isvalue1==1||item.isvalue1==3)?'red':''">{{item.value1||'/'}}</div>
                </div>
                <div class="fm_top_li">
                    <div :class="(item.isvalue2==1||item.isvalue2==3)?'red':''">{{item.value2||'/'}}</div>
                    <div :class="(item.isvalue3==1||item.isvalue3==3)?'red':''">{{item.value3||'/'}}</div>
                </div>
                <div class="fm_top_li">
                    <div :class="(item.isvalue4==1||item.isvalue4==3)?'red':''">{{item.value4||'/'}}</div>
                    <div :class="(item.isvalue5==1||item.isvalue5==3)?'red':''">{{item.value5||'/'}}</div>
                </div>

                <div
                    class="fm_top_li"
                    :class="(item.isvalue6==1||item.isvalue6==3)?'red':''"
                >{{item.value6||'/'}}</div>
                <div
                    class="fm_top_li"
                    :class="(item.isvalue7==1||item.isvalue7==3)?'red':''"
                >{{item.value7||'/'}}</div>
            </div>
        </scroll-view>
        </div>
        
    </view>
</template>
<script>
export default {
    data() {
        return {
            historylist: null,
            dataList: [],
        };
    },
    mounted() {
        var _this = this;
        _this.getList();
    },
    methods: {
        goactive(itm) {},

        getperiod(val) {
            var a = "";
            switch (val) {
                case 0:
                    a = "早餐前";
                    break;
                case 1:
                    a = "早餐后";
                    break;
                case 2:
                    a = "午餐前";
                    break;
                case 3:
                    a = "午餐后";
                    break;
                case 4:
                    a = "晚餐前";
                    break;
                case 5:
                    a = "晚餐后";
                    break;
                case 6:
                    a = "睡前";
                    break;
                case 7:
                    a = "凌晨";
                    break;
                default:
                    a = "";
            }
            return a;
        },
        getList() {
            var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getChartForm", {
                    monitorTypeId: "316252407883640832",
                })
                .then((res) => {
                    if (res.status == 200) {
                        _this.historylist = res.content;
                        _this.dataList = [];
                        // bloodResult (integer, optional): 血糖结果 ,
                        // period (integer, optional): 检测时间段（时间段 0早餐前 1早餐后、2午餐前、3午餐后、4晚餐前 5晚餐后 6睡前 7凌晨） ,
                        // values (string, optional): 血糖值
                        for (var i = 0; i < _this.historylist.length; i++) {
                            var itmes = {
                                time: _this.historylist[i].monitorTime,
                                value0: "",
                                isvalue0: "",
                                value1: "",
                                isvalue1: "",
                                value2: "",
                                isvalue2: "",
                                value3: "",
                                isvalue3: "",
                                value4: "",
                                isvalue4: "",
                                value5: "",
                                isvalue5: "",
                                value6: "",
                                isvalue6: "",
                                value7: "",
                                isvalue7: "",
                            };
                            var jt = _this.historylist[i].chartFormRespones;
                            if (jt) {
                                for (var s in itmes) {
                                    for (var j = 0; j < jt.length; j++) {
                                        if (s == "value" + jt[j].period) {
                                            itmes[s] = jt[j].values;
                                        }
                                        if (s == "isvalue" + jt[j].period) {
                                            itmes[s] = jt[j].bloodResult;
                                        }
                                    }
                                }
                            }
                            _this.dataList.push(itmes);
                        }
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
        },
    },
};
</script>

<style scoped lang="scss">
.cForm {
    // height: calc(100% - 88upx);

    .cForm_t {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;

        .cForm_tli {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            height: 100upx;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            text-align: center;
            line-height: 100upx;
            background: #ffe0ec;
        }
        .cForm_tli:nth-of-type(1) {
            -webkit-box-flex: 0 0 23%;
            -ms-flex: 0 0 23%;
            flex: 0 0 23%;
        }
        .cForm_tli:nth-of-type(6),
        .cForm_tli:nth-of-type(5) {
            -webkit-box-flex: 0 0 10%;
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
        }
        .cForm_tli + .cForm_tli {
            border-left: 1px solid #fff;
        }
    }
    .cForm_tw {
        display: -webkit-box;
        display: -webkit-flex;
        display: flex;
        border-top: 1px solid #fff;
        .cForm_tli {
            -webkit-box-flex: 1;
            -ms-flex: 1;
            flex: 1;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            align-items: center;
            justify-content: center;
            vertical-align: middle;
            text-align: center;
            height: 60upx;
            line-height: 60upx;
            background: #ffe0ec;
            font-size: 20upx;
            div {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
            }
            div:nth-of-type(2) {
                border-left: 1px solid #fff;
            }
        }
        .cForm_tli:nth-of-type(1) {
            -webkit-box-flex: 0 0 23%;
            -ms-flex: 0 0 23%;
            flex: 0 0 23%;
        }
        .cForm_tli:nth-of-type(6),
        .cForm_tli:nth-of-type(5) {
            -webkit-box-flex: 0 0 10%;
            -ms-flex: 0 0 10%;
            flex: 0 0 10%;
        }
        .cForm_tli + .cForm_tli {
            border-left: 1px solid #fff;
        }
    }
    .page_dcenter_null {
        padding-top: 180upx;
        text-align: center;
        .page_dcenter_null_img {
            height: 180upx;
            width: 162upx;
        }
    }
    .pagses {
        height: 100%;
        .fm_top {
            border-top: 1px solid #ddd;
            display: -webkit-box;
            display: -webkit-flex;
            display: flex;
            .fm_top_li {
                -webkit-box-flex: 1;
                -ms-flex: 1;
                flex: 1;
                display: -webkit-box;
                display: -webkit-flex;
                display: flex;
                align-items: center;
                justify-content: center;
                vertical-align: middle;
                text-align: center;
                height: 70upx;
                line-height: 70upx;
                background: #fff;
                font-size: 20upx;
                div {
                    -webkit-box-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                }
                div:nth-of-type(2) {
                    border-left: 1px solid #ddd;
                }
            }
            .red {
                background: #fa4d93;
                color: #fff;
            }
            .fm_top_li:nth-of-type(1) {
                -webkit-box-flex: 0 0 23%;
                -ms-flex: 0 0 23%;
                flex: 0 0 23%;
            }
            .fm_top_li:nth-of-type(6),
            .fm_top_li:nth-of-type(5) {
                -webkit-box-flex: 0 0 10%;
                -ms-flex: 0 0 10%;
                flex: 0 0 10%;
            }
            .fm_top_li + .fm_top_li {
                border-left: 1px solid #ddd;
            }
        }
    }
}
</style>